<template>
  <div>
    <div class="flex space-between align-center mb-20">
      <b class="blue-line">{{ $t('other.staffCoefficient') }}</b>
      <div>
        <a-input-search v-model:value.trim="searchVal" enter-button :placeholder="$t('other.pleaseInputJobNoOrName')"  @search="loadData" />
      </div>
    </div>
    <a-form ref="makeForm" :model="dataSource">
      <a-table rowKey="uniqueId" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: '264px'}" :pagination="false" class="form-table">
        <template #headerCell="{ column }"> 
          <template v-if="column.key === 'percent'">
            <span class="text-red">*</span>{{ $t('other.coefficient') }}
          </template> 
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'percent'">
            <a-form-item :name="[index, 'percent']"   :rules="[{ required: true, message: $t('common.pleaseInput'), trigger: 'change'}, { pattern: /^\d+(\.\d{0,2})?$/, message: $t('other.pleaseInputSureTypeKeepTwoPoint') }]">
              <a-input-number v-model:value="record.percent" allowClear :min="0" :max="100"  :placeholder="$t('common.pleaseInput')" class="full-width" />
           </a-form-item>
          </template>
        </template> 
      </a-table>
    </a-form>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {staffColumns} from './config'
import { cloneDeep  } from 'lodash' 
import axios from '@/utils/request' 
  let dataSource = ref([ ])
  let loading = ref(false)
  let searchVal = ref()
  let columns = ref(staffColumns)
  let makeForm = ref()

  const loadData = async () => {
    loading.value = true
    try {
      const res = await axios.postAction('/api/system/verifyFactory/staffPercentPageList', {param: searchVal.value})
      dataSource.value =  res?.success ? res.data || [] : []
      loading.value = false
    } catch {
      dataSource.value =  []
      loading.value = false
    }
  } 
  const initColoum = ()=> {
    // 款号 制单号
    let columnsList = cloneDeep(staffColumns)
    columnsList.forEach(i => {
      if (i.dataIndex == 'groupName') {
        let ary =  dataSource.value.map(el => el.groupName).filter(i => i) 
        i.filters = Array.from(new Set(ary))
      } 
    })
    columns.value = columnsList
  }

  onMounted(async() => {
    await loadData()
    initColoum()
  }) 
  defineExpose({
    makeForm,
    dataSource,
    loadData
  })
</script>
